<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../css/add.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        #AjaxFileData{
            position: absolute;
            top: 0;left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        #saveBtn{
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="title">
        <em></em>
        <h3>选择发放渠道</h3>
    </div>
    <form class="layui-form padding15_10" action="">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="sellerName" id="sellerName" disabled class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="service" lay-filter="serviceName" id="serviceName">
                </select>
            </div>
        </div>
        
            <div class="title">
        <em></em>
        <h3>上传验收报告</h3>
    </div>
        
        <div class="layui-inline">
                   <div class="layui-upload layui-input-block ">
                            <div class="upLoadFormDadaDiv layui-btn">
                                <i class="layui-icon"></i>上传文件
                                <input id="contractFileData" type="file" name="file">
                            </div>
                            <input type="hidden" id="contractFile" name="contractFile">
        </div>
        </div>
        <input type="hidden" id="contractFile" name="contractFile" >

        
    </form>
    <div class="title">
        <em></em>
        <h3>上传费用明细表</h3>
    </div>
    <div class="layui-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <form class="layui-form padding15_10" action="">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="downLoad">下载模板</button>
                        </div>
                        <div  class="layui-input-inline">
                            请按照模板填写人员费用数据
                        </div>
                    </div>
                </form>
                <div class="layui-upload-drag" id="upLoadExcel">
                    <div id="up" class="">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <p>请上传小于5M的xls或xlsx格式文件</p>
                    </div>
                    <div id="ok" class="layui-hide">
                        <i class="layui-icon">&#x1005;</i>
                        <p>文件上传成功！</p>
                    </div>

                    <input id="AjaxFileData" type="file" name="file" accept=".xls,.xlsx">

                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <h4>文件解析中，请稍等。。。</h4>
                        <img src="/images/loading.gif" alt="解析中" style="width: 100%">
                    </div>
                </div>
                <div class="layui-hide" id="saveBtnBox">
                    <input type="button" class="layui-btn" id="saveBtn" value="提 交">
                </div>
            </div>
            <div class="layui-col-md6">
                <h3>提示:</h3>
                <p>1.上传表格条数不能超过2万条。</p>
                <p>2.单人单次发放金额需小于50,000元。</p>
                <p>3.单人单月发放金额需小于100,000元。</p>
                <p>4.预计2小时内到账,具体发放时间以银行通知为准。</p>
                <p>5.由于银行对公转账的相关限制，费用支付在工作日内:周一至周周五 09:30 ~15:00之前进行，超过该时间顺延到第二个工作日办理，如需按时发放请提前做好相关工作准备。</p>

            </div>
        </div>
    </div>

</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','upload','tfApi','table'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            API = layui.tfApi,
            storage = localStorage,//window.sessionStorage,
            sellerName = storage.getItem("sellerName"),
            _oderId = '';






        $("#sellerName").val(sellerName);

        API.postAjax('/seller/qryAllService',{},function (res) {
            if(res.code == 0){
                var selData = res.data;
                //console.log(selData[0].serviceId);
                //console.log(selData[0].serviceName);
                var _h = "<option value='|'>请选择服务商</option>";

                for(var i =0; i<selData.length; i++){
                    _h += "<option value='"+selData[i].serviceId+"|"+selData[i].serviceName+"'>"+selData[i].serviceName+"</option>"
                }
                $("#serviceName").append(_h);
                form.render('select');
            }
        });

        //监听提交
        form.on('submit(downLoad)', function (data) {
            window.open(API.CURL1+"/grant1.xlsx");
            return false;
        });


        $("#AjaxFileData").change(function(){

            var picFiles = $("#AjaxFileData")[0].files[0];

            var obj = $("#AjaxFileData");

            var imgType = obj.val();

            console.log("imgType=="+imgType);

            if (!/.(xlsx|xls)$/.test(imgType)) {
                layer.alert("您上传的文件类型不符合(.xlsx|.xls)！");
                return false;
            }
            if (($("#AjaxFileData")[0].files[0].size / 1024) > (5 * 1024)) {
                layer.alert("上传图片不得大于 5M");
                return false;
            }


            var formData = new FormData();

            var _srData = $("#serviceName").val(),
                _serviceId = _srData.split("|")[0],
                _serviceName = _srData.split("|")[1];
            
            var _contractFile = $("#contractFile").val();
            console.log(_contractFile);
            //console.log(picFiles);
            //console.log("_srData="+_srData);
            //console.log("_serviceId="+_serviceId);
            //console.log("_serviceName="+_serviceName);

            formData.append("file", picFiles);
            formData.append("serviceId", _serviceId);
            formData.append("serviceName", _serviceName);
            formData.append("reportFile", _contractFile);

            //console.log(formData);

            if(_serviceId == "" || _serviceName == ""){
                layer.msg('请选择服务商', {icon: 5});
                var fileInput = document.getElementById("AjaxFileData");
                fileInput.value = '';
                return false;
            }


            $.ajax({
                url : API.CURL + '/seller/insFeeSend',
                type: "post",
                data: formData,
                contentType:false,
                //取消帮我们格式化数据，是什么就是什么
                processData:false,
                beforeSend: function () {
                    $("#uploadDemoView").removeClass("layui-hide");
                    $("#AjaxFileData").attr({ disabled: "disabled" });
                },
                success: function (data) {
                    var res = JSON.parse(data);
                    //console.log(res);
                    if(res.code == 0){
                       //
                        API.postAjax('/seller/qryAccounts',{"page":0,"pageSize":50},function(money_res){
                            console.log(money_res);
                            //查询账户余额
                            if(money_res.data!=undefined && money_res.data.length>0){
                                var _data = res.data;
                                //console.info(res.data);
                                /*  $("#yjje").html(_data.totalFee);
                                  $("#sfje").html(_data.realFee);
                                  $("#fwf").html(_data.serviceFee);*/
                                _oderId = _data.orderId;
                                /* $("#saveBtnBox").removeClass("layui-hide");*/
                                $("#up").addClass("layui-hide");
                                $("#ok").removeClass("layui-hide");
                                var fileInput = document.getElementById("AjaxFileData");
                                fileInput.value = '';
                                var money_index=0;
                               $.each(money_res.data,function(k,item){
                                    if(item.serviceId==_serviceId){
                                        money_index=k;
                                    }
                               });
                                var accountTotal = parseFloat(money_res.data[money_index].accountTotal).toFixed(2);
                                console.log(accountTotal);
                                layer.open({
                                    title:'信息核对无误后，点击确定按钮进行发放',
                                    type: 1
                                    ,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                    ,closeBtn: false
                                    ,id: 'layerDemoauto' //防止重复弹出
                                    ,area: ['100%', '500px']
                                    ,content: '<div>' +
                                                    '<div style="line-height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;账户余额：<span id="my_money" money="'+ accountTotal +'">'+ API.numFun(accountTotal) +'</span></div>' +
                                                    '<div style="line-height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;合计发放金额：<span id="realAmount_money" money="'+_data.order.realAmount+'">'+API.numFun(_data.order.realAmount)+'</span><div>' +
                                                    '<table id="templateTable" lay-filter="templateTable"></table>' +
                                                '</div>'
                                    ,btn: ['确定提交', '取消本次操作']
                                    ,btnAlign: 'c' //按钮居中
                                    ,shade: 0 //不显示遮罩
                                    ,success: function (index, layero) {
                                        var table = layui.table;
                                        console.info(table);
                                        table.render({
                                            elem: '#templateTable'
                                            , height: 300
                                            , width: '98%'
                                            , data: _data.provideDetails//result格式为[{},{}],此处用的是固定数据,也可以用url来请求后台获取数据,如果使用url要根据layui规定的格式返回才可以渲染上,例：{"code": 0,"msg": "","count": 1000,"data": [{}, {}]} 或者使用parseData进行转化也可以
                                            , cols: [[ //设置数据表格表头
                                                // {field: 'name', title: '文件名称', width: 700, hide: false},
                                                {field: 'id', title: '交易流水号',width: 220},
                                                {field: 'payeeName', title: '收款人姓名',width: 80,templet:function (d) {
                                                    return d.payeeName.replace(/\ +/g,"")
                                                }},
                                                {field: 'payeeAccount', title: '收款账号',minWidth:170,templet:function (d) {
                                                    return d.payeeAccount.replace(/\ +/g,"")
                                                }},
                                                {field: 'payAmount', title: '交易金额',width:100,templet:function (d) {
                                                        return '<b>'+API.numFun(d.payAmount)+'</b>'
                                                    },align:"right"},
                                                {field: 'title', title: '项目名称',width:120},
                                                {field: 'info', title: '项目描述',width:220},
                                                {field: 'name', title: '项目负责人',width:100},
                                                {field: 'phone', title: '项目负责人电话号码',width:120,templet:function (d) {
                                                    return d.phone.replace(/\ +/g,"")
                                                }},
                                                {field: 'askTime', title: '请求时间',width:120}
                                            ]]
                                            , page: false //使用分页
                                            , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] //动态设置每页显示数据的条数
                                            , limit: 20000 //默认每页多少条
                                        });
                                        table.on('checkbox(templateTable)', function (obj) { //监听复选框,获取选择到的值
                                            let obj_data = obj.data; //获取到选中复选框上的一行数据
                                            let path=obj_data.path; //获取某个字段的值

                                        });
                                    }
                                    ,btn1: function(index, layero){
                                        var $=layui.jquery;
                                        if((parseFloat($("#my_money").attr("money"))+1) < parseFloat($("#realAmount_money").attr("money")) ){
                                            layer.alert('账户余额不足，请充值后重新发放！',function () {
                                                layer.close(layer.index);
                                                parent.location.reload();
                                            });
                                        }else{
                                            API.postAjax('/seller/subData',{orderId:_oderId},function (res) {
                                                if(res.code == "0"){
                                                    layer.alert('提交成功！',function () {
                                                        layer.close(layer.index);
                                                        parent.location.reload();
                                                    });

                                                }
                                            });
                                        }

                                    },btn2: function(){
                                        API.postAjax('/seller/updateData',{orderId:_oderId},function (res) {
                                            if(res.code == "0"){
                                                layer.alert('已取消！',function () {
                                                    layer.close(layer.index);
                                                    parent.location.reload();
                                                });

                                            }
                                        });
                                    }
                                });
                            }else{
                                layer.msg("系统异常，查询账户余额错误。请充值！",{icon:5,time:2000});
                            }
                        });
                    }
                    if(res.code == "-1"){
                        layer.msg("系统异常，请稍后重试！",{icon:5,time:2000},function () {
                            var fileInput = document.getElementById("AjaxFileData");
                            fileInput.value = '';
                            $("#AjaxFileData").removeAttr("disabled");
                        })
                    }
                    if(res.code == "-2"){
                        layer.msg("服务商不存在!请选择服务商",{icon:5,time:2000},function () {
                            var fileInput = document.getElementById("AjaxFileData");
                            fileInput.value = '';
                            $("#AjaxFileData").removeAttr("disabled");
                        })
                    }
                    if(res.code == "-3"){
                        layer.msg("上传文件表格条数超过2万条限制！",{icon:5,time:2000},function () {
                            var fileInput = document.getElementById("AjaxFileData");
                            fileInput.value = '';
                            $("#AjaxFileData").removeAttr("disabled");
                        })
                    }
                    if(res.code == "-4"){
                        var fileInput = document.getElementById("AjaxFileData");
                        fileInput.value = '';
                        $("#AjaxFileData").removeAttr("disabled");
                        layer.alert(res.msg+"，点击下载表格，重新修改后再上传",{icon:5,btn:"下载"},function (index) {
                            window.open(res.data);
                            layer.close(index);

                        })
                    }
                    if(res.code == "-5"){
                        layer.msg("文件解析错误！请检查是否为可打开的excel表格！",{icon:5,time:2000},function () {
                            var fileInput = document.getElementById("AjaxFileData");
                            fileInput.value = '';
                            $("#AjaxFileData").removeAttr("disabled");
                        })
                    }
                },
                complete: function () {
                    $("#uploadDemoView").addClass("layui-hide");
                }

            });

        });
        
        
        //文档上传
        var formData = new FormData(),
            picFiles = '',
        picObjs = document.getElementById("contractFileData");
        $("#contractFileData").change(function(){
            //$("#picShow").attr("src",URL.createObjectURL($(this)[0].files[0]));
            var file = $('#contractFileData').get(0).files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            console.log('picObjs.value-1--v',picObjs.value);

            if(picObjs.value != ""){ //
                picFiles = $("#contractFileData")[0].files[0];
                var imgType = (picFiles.name.substr(picFiles.name.lastIndexOf("."))).toLowerCase();
                if (imgType != ".doc" && imgType != ".docx" && imgType != ".xlsx" && imgType != ".xls" && imgType != ".pdf" && imgType != ".txt"
                	&& imgType != ".rar" && imgType != ".zip" && imgType != ".jepg" && imgType != ".png") {
                	
                	
                    layer.alert("您上传图片的类型不符合(.doc|.docx|.pdf|.xlsx|.xls|.txt|.rar|.txt|.zip|.jeppg|.png)！");
                    picObjs.value = '';
                    return false;
                }
                formData.append("file", picFiles);

                $.ajax({
                    url: API.CURL + '/seller/upload',
                    type: 'POST',
                    header: {
                        'content-type': 'multipart/form-data;'
                    }, // 设置请求的 header
                    processData:false,
                    contentType: false,
                   // cache:false,
                    data: formData,
                    //contentType: 'multipart/form-data',
                    success: function (res) {
                        //console.log("ok==res.data",res.data);
                        $("input[name='contractFile']").val(res);
                    }
                });
            }

        });



        /*$("#saveBtn").click(function () {
            API.postAjax('/seller/subData',{orderId:_oderId},function (res) {
                if(res.code == "0"){
                    layer.alert('提交成功！',function () {
                        layer.close(layer.index);
                        parent.location.reload();
                    });

                }
            });
        });*/


    });
</script>
</body>
</html>